<script setup>
import AppPage from "@/pages/admin/layouts/AppPage.vue";
import {useForm} from "@inertiajs/vue3";
import {Message} from "@arco-design/web-vue";
import ImageUpload from '@/components/upload/image.vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    title: {
        type: String,
        default: '网站设置'
    }
})

const form = useForm({
    website_name: '',
    website_url: '',
    website_logo: '',
    website_title: '',
    website_keywords: '',
    website_description: '',
    website_icp: '',
    website_police_icp: '',
    website_copyright: '',
    website_analytics: '',
    website_contact: '',
    website_email: '',
    website_phone: '',
    website_address: '',
    website_wechat_qrcode: '',
})

const rules = ref({
    website_name: [{required: true, message: '请输入网站名称', trigger: 'blur'}],
    website_url: [{required: true, message: '请输入网站域名', trigger: 'blur'}],
    website_logo: [{required: true, message: '请上传网站LOGO', trigger: 'blur'}],
    website_title: [{required: true, message: '请输入网站标题', trigger: 'blur'}],
    website_keywords: [{required: true, message: '请输入网站关键词', trigger: 'blur'}],
    website_description: [{required: true, message: '请输入网站描述', trigger: 'blur'}],
    website_icp: [{required: true, message: '请输入网站ICP备案号', trigger: 'blur'}],
    website_police_icp: [{required: true, message: '请输入网站公安备案号', trigger: 'blur'}],
    website_copyright: [{required: true, message: '请输入网站版权信息', trigger: 'blur'}],
    website_analytics: [{required: true, message: '请输入网站分析代码', trigger: 'blur'}],
    website_contact: [{required: true, message: '请输入网站联系信息', trigger: 'blur'}],
    website_email: [{required: true, message: '请输入网站邮箱', trigger: 'blur'}],
    website_phone: [{required: true, message: '请输入网站联系电话', trigger: 'blur'}],
    website_address: [{required: true, message: '请输入网站联系地址', trigger: 'blur'}],
    website_wechat_qrcode: [{required: true, message: '请上传网站微信二维码', trigger: 'blur'}],
})

const FormRef = ref()
const loading = ref(false)
const handleSubmit = async () => {
    try {
        loading.value = true
        const valid = await FormRef.value.validate()
        if (valid) {
            return
        }
        form.post(route('admin.setting.website.update'), {
            onSuccess: () => {
                Message.success('保存成功')
            },
            onError: (errors) => {
                console.log(errors)
                const fields = {};
                // 遍历所有错误
                for (const [fieldName, messages] of Object.entries(errors)) {
                    // 构造字段对象
                    fields[fieldName] = {
                        status: 'error',
                        message: messages
                    };
                    FormRef.value.scrollToField(fieldName)
                }
                FormRef.value.setFields(fields);
            }
        })
    } catch (error) {
        console.log(error)
    } finally {
        loading.value = false
    }
}

const handleReset = () => {
    FormRef.value.resetFields()
}

onMounted(() => {
    Object.assign(form, props.data)
})
</script>

<template>
    <app-page :title="title">
        <a-card
            :title="title"
            :style="{ borderRadius: '12px'}"
            class="custom-card h-auto shadow-sm transition-all duration-300 hover:shadow-md"
        >
                <a-form
                    ref="FormRef"
                    :model="form"
                    :rules="rules"
                    :scroll-to-first-error="true"
                    auto-label-width
                    layout="horizontal"
                    @submit="handleSubmit"
                >
                    <!-- 基本信息 -->
                    <div class="section-title">基本信息</div>
                    <div class="form-grid">
                        <a-form-item class="form-item" field="website_name" label="网站名称">
                            <a-input
                                v-model.trim="form.website_name"
                                :max-length="30"
                                allow-clear
                                placeholder="请输入网站名称"
                                show-word-limit
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_url" label="网站域名">
                            <a-input
                                v-model.trim="form.website_url"
                                allow-clear
                                placeholder="请输入网站域名"
                            />
                        </a-form-item>

                        <a-form-item class="form-item full-width" field="website_logo" label="网站LOGO">
                            <div class="upload-container">
                                <image-upload v-model="form.website_logo"/>
                                <div class="upload-tip">建议尺寸：200×60px，支持PNG、JPG格式</div>
                            </div>
                        </a-form-item>
                    </div>

                    <!-- SEO设置 -->
                    <div class="section-title">SEO设置</div>
                    <div class="form-grid">
                        <a-form-item class="form-item" field="website_title" label="网站标题">
                            <a-input
                                v-model="form.website_title"
                                allow-clear
                                placeholder="请输入网站标题"
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_keywords" label="网站关键词">
                            <a-input
                                v-model="form.website_keywords"
                                allow-clear
                                placeholder="请输入网站关键词"
                            />
                        </a-form-item>

                        <a-form-item class="form-item full-width" field="website_description" label="网站描述">
                            <a-textarea
                                v-model="form.website_description"
                                :auto-size="{ minRows: 3, maxRows: 5 }"
                                :max-length="200"
                                placeholder="请输入网站描述"
                                show-word-limit
                            />
                        </a-form-item>
                    </div>

                    <!-- 备案信息 -->
                    <div class="section-title">备案信息</div>
                    <div class="form-grid">
                        <a-form-item class="form-item" field="website_icp" label="ICP备案号">
                            <a-input
                                v-model="form.website_icp"
                                allow-clear
                                placeholder="请输入ICP备案号"
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_police_icp" label="公安备案号">
                            <a-input
                                v-model="form.website_police_icp"
                                allow-clear
                                placeholder="请输入公安备案号"
                            />
                        </a-form-item>

                        <a-form-item class="form-item full-width" field="website_copyright" label="版权信息">
                            <a-input
                                v-model="form.website_copyright"
                                :max-length="100"
                                allow-clear
                                placeholder="请输入版权信息"
                                show-word-limit
                            />
                        </a-form-item>
                    </div>

                    <!-- 联系信息 -->
                    <div class="section-title">联系信息</div>
                    <div class="form-grid">
                        <a-form-item class="form-item" field="website_contact" label="联系人">
                            <a-input
                                v-model="form.website_contact"
                                allow-clear
                                placeholder="请输入联系人"
                            />
                        </a-form-item>

                        <a-form-item class="form-item " field="website_address" label="联系地址">
                            <a-input
                                v-model="form.website_address"
                                :max-length="100"
                                allow-clear
                                placeholder="请输入联系地址"
                                show-word-limit
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_email" label="联系邮箱">
                            <a-input
                                v-model="form.website_email"
                                allow-clear
                                placeholder="请输入联系邮箱"
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_phone" label="联系电话">
                            <a-input
                                v-model="form.website_phone"
                                allow-clear
                                placeholder="请输入联系电话"
                            />
                        </a-form-item>


                    </div>

                    <!-- 其他设置 -->
                    <div class="section-title">其他设置</div>
                    <div class="form-grid">
                        <a-form-item class="form-item full-width" field="website_analytics" label="分析代码">
                            <a-textarea
                                v-model="form.website_analytics"
                                :auto-size="{ minRows: 4, maxRows: 8 }"
                                class="code-textarea"
                                placeholder="请输入分析代码"
                            />
                        </a-form-item>

                        <a-form-item class="form-item" field="website_wechat_qrcode" label="微信二维码">
                            <div class="upload-container">
                                <image-upload v-model="form.website_wechat_qrcode"/>
                                <div class="upload-tip">建议尺寸：200×200px，支持PNG、JPG格式</div>
                            </div>
                        </a-form-item>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="form-actions">
                        <a-button :loading="loading" class="submit-btn" html-type="submit" size="large" type="primary">保存设置</a-button>
                        <a-button class="ml-3" size="large" type="outline" @click="handleReset">重置</a-button>
                    </div>
                </a-form>
        </a-card>
    </app-page>
</template>

<style scoped>
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-2);
    position: relative;
    padding-left: 8px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 2px;
    border-radius: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    margin-bottom: 8px;
}

.form-item {
    margin-bottom: 0;
}

.form-item.full-width {
    grid-column: 1 / -1;
}

.upload-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-tip {
    font-size: 12px;
    color: var(--color-text-3);
    line-height: 1.4;
}

.code-textarea {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    gap: 12px;
    border-top: 1px solid var(--color-border-2);
}

.submit-btn {
    padding-left: 32px;
    padding-right: 32px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .submit-btn, .form-actions .ml-3 {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* 卡片悬停效果增强 */
.custom-card {
    border: 1px solid var(--color-border-2);
    transition: all 0.3s ease;
}

.custom-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* 表单元素样式优化 */
:deep(.arco-form-item-label) {
    font-weight: 500;
    color: var(--color-text-2);
}

:deep(.arco-input),
:deep(.arco-textarea) {
    border-radius: 6px;
    transition: all 0.2s ease;
}

:deep(.arco-input:focus),
:deep(.arco-textarea:focus) {
    border-color: var(--color-primary-light-3);
    box-shadow: 0 0 0 2px var(--color-primary-light-5);
}
</style>
